<template>
  <div class="com_item">
    <div class="img">
      <img :src="img" alt="" />
    </div>
    <div class="info">
      <div class="nickname">{{nickname}}</div>
      <div class="content" v-html="content"></div>
      <div class="reset">
        <div class="timer">
          <a class="hf">回复</a>
          <span class="time">{{ createdAt | getTime}}</span>
        </div>
        <div class="like">
            {{likes}}&nbsp;<van-icon name="good-job-o" /></div>
      </div>
      <div class="reset_com" v-if="replies.length">
        <p 
        v-for="item in replies" :key="item.id"
        >
        <span class="re">
            {{ item.nickname }}&nbsp;回复&nbsp; {{'@'+item.pNickname}}
        </span
        >
        <span class="rec" v-html="item.content"></span>
        </p>
      </div>
    </div>
   
  </div>
</template>

<script>
export default {
    props:{
        id:{
            type:Number
        },
        uid:{
            type:Number
        },
        nickname:{
            type:String
        },
        img:{
            type:String
        },
        content:{
            type:String
        },
        replies:{
            type:Array
        },
        likes:{
            type:Number
        },
        createdAt:{
            type:Number
        }
    },
    filters:{
      getTime(val){
        let dt = new Date(val)

    let yy = dt.getFullYear()
    let mm = dt.getMonth()+1
    let dd = dt.getDay()
    let hh = dt.getHours()
    let mn = dt.getMinutes()
    hh = hh > 10 ? hh : '0'+hh
    mn = mn > 10 ? mn : '0'+mn

    let str = `${yy}-${mm}-${dd} ${hh}:${mn}`
    return str
      }
    }

};
</script>

<style lang="scss" scoped>
.com_item {
  display: flex;
  .img {
    width: 45px;
    > img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }
  .info {
    flex: 1;
    .nickname {
      font-size: 14px;
      color: #666;
      margin-bottom: 4px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .content {
      font-size: 14px;
      color: #333;
      line-height: 23.5px;
      /deep/.emoji{
          width: 12px  !important;
          height: 12px !important;
      }
    }
    .reset {
      display: flex;
      margin-bottom: 7px;
      justify-content: space-between;
      .timer {
        font-size: 12px;
        .hf {
          color: #666;
        }
        .time {
            margin-left: 5px;
          color: #999;
        }
      }
      .like {
        font-size: 12px;
        color: #999;
      }
    }
    .reset_com {
      padding: 8px;
      background-color: #f3f4f5;
      p {
        font-size: 12px;
        color: #333;
        line-height: 23.5px;
      }

      .rec{
        .emoji{

        }
      }
    }
  }
  
}
</style>

